<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
		function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //for-mobile-apps -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="css/contactstyle.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/faqstyle.css" type="text/css" media="all" />
<link href="css/single.css" rel='stylesheet' type='text/css' />
<link href="css/medile.css" rel='stylesheet' type='text/css' />
<!-- banner-slider -->
<link href="css/jquery.slidey.min.css" rel="stylesheet">
<!-- //banner-slider -->
<!-- pop-up -->
<link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all" />
<!-- //pop-up -->
<!-- font-awesome icons -->
<link rel="stylesheet" href="css/font-awesome.min.css" />
<!-- //font-awesome icons -->
<!-- js -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<!-- //js -->
<!-- banner-bottom-plugin -->
<link href="css/owl.carousel.css" rel="stylesheet" type="text/css" media="all">
<script src="js/owl.carousel.js"></script>
<script>
	$(document).ready(function() {
		$("#owl-demo").owlCarousel({

		  autoPlay: 3000, //Set AutoPlay to 3 seconds

		  items : 5,
		  itemsDesktop : [640,4],
		  itemsDesktopSmall : [414,3]

		});

	});
</script>
<!-- //banner-bottom-plugin -->
<!---<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700italic,700,400italic,300italic,300' rel='stylesheet' type='text/css'>--->
<!-- start-smoth-scrolling -->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event){
			event.preventDefault();
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
		});
	});
</script>
<!-- start-smoth-scrolling -->
</head>

<body>
<div id="app">
<!-- header -->
	<div class="header">
		<div class="container">
			<div class="w3layouts_logo">
				<a href="index.html"><h1>One<span>Movies</span></h1></a>
			</div>
			<div class="w3_search">
				<form action="#" method="post">
					<input type="text" name="Search" placeholder="检索电影、影人" required="">
					<input type="submit" value="Go">
				</form>
			</div>
			<div class="w3l_sign_in_register">
				<ul>
					<li><i class="fa fa-phone" aria-hidden="true"></i> (+000) 123 345 653</li>
					<!-- 未登录就显示登录按钮 -->
					<li v-if="loginUser==null">
						<a href="#" data-toggle="modal" data-target="#myModal">Login</a>
					</li>
					<!-- 已经登录就显示用户信息和登出按钮 -->
					<li v-else>
						<span>欢迎回来：{{ loginUser.nickName }}</span>
						<a class="btn btn-sm" style="color: #fff;"  href="javascript:void(0)" @click="$logout">退出</a>
					</li>
				</ul>
			</div>
			<div class="clearfix"> </div>

		</div>
	</div>
	<!-- //header -->
	<!-- bootstrap-pop-up -->
	<div class="modal video-modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					Sign In & Sign Up
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
					</button>
				</div>
				<section>
					<div class="modal-body">
						<div class="w3_login_module">
							<div class="module form-module">
								<div class="toggle"><i class="fa fa-times fa-pencil"></i>
									<div class="tooltip">Click Me</div>
								</div>
								<div class="form">
									<h3>Login to your account</h3>
									<form action="#" method="post">
										<input type="text" name="Username" placeholder="Username" required="">
										<input type="password" name="Password" placeholder="Password" required="">
										<input type="submit" value="Login">
									</form>
								</div>
								<div class="form">
									<h3>Create an account</h3>
									<form action="#" method="post">
										<input type="text" name="Username" placeholder="Username" required="">
										<input type="password" name="Password" placeholder="Password" required="">
										<input type="email" name="Email" placeholder="Email Address" required="">
										<input type="text" name="Phone" placeholder="Phone Number" required="">
										<input type="submit" value="Register">
									</form>
								</div>
								<div class="cta"><a href="#">Forgot your password?</a></div>
							</div>
						</div>
					</div>
				</section>
			</div>
		</div>
	</div>

	<!-- //bootstrap-pop-up -->
	<!-- nav -->
	<div class="movies_nav">
		<div class="container">
			<nav class="navbar navbar-default">
				<div class="navbar-header navbar-left">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
				</div>
				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
					<nav>
						<ul class="nav navbar-nav">
							<li class="active"><a href="index3.html">首页</a></li>
							<li><a href="news.html">影讯&amp;购票</a></li>
							<li><a href="series.html">排行榜</a></li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown">分类 <b class="caret"></b></a>
								<genres-menus></genres-menus>
							</li>

							<li><a href="review.html">影评</a></li>

							<!--<li><a href="short-codes.html">排行榜</a></li>-->
							<li><a href="list.html">电影列表</a></li>
						</ul>
					</nav>
				</div>
			</nav>
		</div>
	</div>
<!-- //nav -->
<!-- banner -->
	<div id="slidey" style="display:none;">
		<ul>
			<li v-for="item in bannerList">
				<img v-bind:src="item.post" alt=" ">
				<p class='title'>{{item.title}}</p>
				<p class='description'>
					{{item.content}}</p>
			</li>
		</ul>
    </div>

<!-- //banner -->

<!-- general -->
	<div class="general">
		<h4 class="latest-text w3_latest_text">{{year}}年度榜单</h4>
		<div class="container">
			<div class="bs-example bs-example-tabs" role="tabpanel" data-example-id="togglable-tabs">
				<!-- 1. 修复Tab标签的href（保持不变，已正确动态生成） -->
				<ul id="myTab" class="nav nav-tabs" role="tablist">
					<!-- 循环yearRankingList生成标签，href为#ranking-索引 -->
					<li role="presentation" :class="{active: index===0}" v-for="(item,index) in yearRankingList" :key="index">
						<a :href="'#ranking-'+index" role="tab" data-toggle="tab">{{year}}评分最高{{item.categoryName}}片</a>
					</li>
				</ul>

				<!-- 2. 修复Tab内容区域：动态生成对应yearRankingList的内容 -->
				<div id="myTabContent" class="tab-content">
					<!-- 循环yearRankingList生成动态Tab内容 -->
					<div role="tabpanel" class="tab-pane fade" :class="{active: index===0, in: index===0}"
						 :id="'ranking-'+index" v-for="(rankItem, index) in yearRankingList" :key="index">
						<div class="w3_agile_featured_movies">
							<!-- 这里用rankItem（循环变量）访问filmList，不再用item -->
							<div class="col-md-2 w3l-movie-gride-agile" v-for="(film, filmIndex) in rankItem.filmList" :key="filmIndex">
								<!-- 修复：链接参数应为film.id，而非filmId -->
								<a :href="'single.html?id='+film.id" class="hvr-shutter-out-horizontal">
									<!-- 修复：图片src应绑定film的海报地址，而非固定图片 -->
									<img :src="film.post || 'images/m15.jpg'" title="album-name" class="img-responsive" alt=" " />
									<div class="w3l-action-icon"><i class="fa fa-play-circle" aria-hidden="true"></i></div>
								</a>
								<div class="mid-1 agileits_w3layouts_mid_1_home">
									<div class="w3l-movie-text">
										<!-- 修复：显示电影标题，而非固定文本 -->
										<h6><a href="single3.html">{{film.title}}</a></h6>
									</div>
									<div class="mid-2 agile_mid_2_home">
										<!-- 修复：显示电影年份，而非固定2016 -->
										<p>{{film.year}}</p>
										<div class="block-stars">
											<ul class="w3l-ratings">
												<!-- 可根据film.rating动态生成星级，这里暂保留静态 -->
												<li><a href="#"><i class="fa fa-star" aria-hidden="true"></i></a></li>
												<li><a href="#"><i class="fa fa-star" aria-hidden="true"></i></a></li>
												<li><a href="#"><i class="fa fa-star" aria-hidden="true"></i></a></li>
												<li><a href="#"><i class="fa fa-star" aria-hidden="true"></i></a></li>
												<li><a href="#"><i class="fa fa-star-half-o" aria-hidden="true"></i></a></li>
											</ul>
										</div>
										<div class="clearfix"></div>
									</div>
								</div>
								<div class="ribben">
									<p>NEW</p>
								</div>
							</div>
							<div class="clearfix"> </div>
						</div>
					</div>
					<!-- 保留静态Tab内容（如爱情片、科幻片等） -->
					<div role="tabpanel" class="tab-pane fade" id="profile" aria-labelledby="profile-tab">
						<!-- 静态内容... -->
					</div>
					<div role="tabpanel" class="tab-pane fade" id="rating" aria-labelledby="rating-tab">
						<!-- 静态内容... -->
					</div>
					<div role="tabpanel" class="tab-pane fade" id="imdb" aria-labelledby="imdb-tab">
						<!-- 静态内容... -->
					</div>
				</div>
			</div>
		</div>
	</div>
<!-- //general -->
<!-- Latest-tv-series -->

	<div id="small-dialog" class="mfp-hide">
		<!---<iframe src="https://player.vimeo.com/video/164819130?title=0&byline=0"></iframe>--->
	</div>
	<div id="small-dialog1" class="mfp-hide">
		<!---<iframe src="https://player.vimeo.com/video/148284736"></iframe>--->
	</div>
	<div id="small-dialog2" class="mfp-hide">
		<!---<iframe src="https://player.vimeo.com/video/165197924?color=ffffff&title=0&byline=0&portrait=0"></iframe>--->
	</div>

<!-- //Latest-tv-series -->
<!-- footer -->
	<div class="footer">
		<div class="container">
			<div class="w3ls_footer_grid">
				<div class="col-md-6 w3ls_footer_grid_left">
					<div class="w3ls_footer_grid_left1">
						<h2>Subscribe to us</h2>
						<div class="w3ls_footer_grid_left1_pos">
							<form action="#" method="post">
								<input type="email" name="email" placeholder="Your email..." required="">
								<input type="submit" value="Send">
							</form>
						</div>
					</div>
				</div>
				<div class="col-md-6 w3ls_footer_grid_right">
					<a href="index3.html"><h2>One<span>Movies</span></h2></a>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="col-md-5 w3ls_footer_grid1_left">
				<p>Copyright &copy; 2016.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
			</div>
			<div class="col-md-7 w3ls_footer_grid1_right">
				<ul>
					<li>
						<a href="genres3.html">Movies</a>
					</li>
					<li>
						<a href="faq.html">FAQ</a>
					</li>
					<li>
						<a href="horror.html">动作</a>
					</li>
					<li>
						<a href="genres3.html">冒险</a>
					</li>
					<li>
						<a href="comedy.html">喜剧</a>
					</li>
					<li>
						<a href="icons.html">Icons</a>
					</li>
					<li>
						<a href="contact.html">Contact Us</a>
					</li>
				</ul>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
</div>

<script src="/public/js/vue.js"></script>
<script src="/public/js/axios.js"></script>
<script src="/public/js/axios-config.js"></script>
<script src="/public/js/vue-config.js"></script>

<script>
	new Vue({
		el: '#app',
		data: {
			loginUser: JSON.parse(sessionStorage.getItem('loginUser')),
			bannerList: [],
			yearRankingList:[],
			year:new Date().getFullYear()
		},
		methods: {
			loadRankingList(){
				let url = '/api/v1/rankingList/page'
				let params = {
					pageNum: 1,
					pageSize: 10,
					year: this.year
				}
				axios.post(url,params)
						.then(res =>{
							this.yearRankingList = res.data.list
						})
			},
			loadBannerList(){
				let url = '/api/v1/banner/page'
				let params = {
					pageNum:1,pageSize:10
				}
				axios.post(url,params)
						.then(res =>{
							this.bannerList = res.data.list
							this.playSlidey()
						})
			},
			playSlidey(){
				window.setTimeout(function () {
					$("#slidey").slidey({
						interval: 8000,
						listCount: 5,
						autoplay: false,
						showList: true
					});
					$(".slidey-list-description").dotdotdot();
				},100)
			}
		},
		beforeUpdate(){
			console.log("Vue data 发生了变化")
		},
		beforeMount(){
			this.loadBannerList()
			this.loadRankingList()
		},
		mounted() {
			window.setTimeout(function () {
				$("#slidey").slidey({
					interval: 8000,
					listCount: 5,
					autoplay: false,
					showList: true
				});
				$(".slidey-list-description").dotdotdot();
			},100)

		}
	})
</script>

<script>
    $(document).ready(function() {
        $('.w3_play_icon,.w3_play_icon1,.w3_play_icon2').magnificPopup({
            type: 'inline',
            fixedContentPos: false,
            fixedBgPos: true,
            overflowY: 'auto',
            closeBtnInside: true,
            preloader: false,
            midClick: true,
            removalDelay: 300,
            mainClass: 'my-mfp-zoom-in'
        });

    });
</script>

<script>
    $('.toggle').click(function(){
        // Switches the Icon
        $(this).children('i').toggleClass('fa-pencil');
        // Switches the forms
        $('.form').animate({
            height: "toggle",
            'padding-top': 'toggle',
            'padding-bottom': 'toggle',
            opacity: "toggle"
        }, "slow");
    });
</script>
<!-- //footer -->


<!-- pop-up-box -->
<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
<!--//pop-up-box -->
<script src="js/jquery.slidey.js"></script>
<script src="js/jquery.dotdotdot.min.js"></script>
<script type="text/javascript">

</script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
    $(".dropdown").hover(
        function() {
            $('.dropdown-menu', this).stop( true, true ).slideDown("fast");
            $(this).toggleClass('open');
        },
        function() {
            $('.dropdown-menu', this).stop( true, true ).slideUp("fast");
            $(this).toggleClass('open');
        }
    );
});
</script>
<!-- //Bootstrap Core JavaScript -->
<!-- here stars scrolling icon -->
	<script type="text/javascript">
		$(document).ready(function() {
			/*
				var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear'
				};
			*/

			$().UItoTop({ easingType: 'easeOutQuart' });

			});
	</script>
<!-- //here ends scrolling icon -->
</body>
</html>